<template>
    <div>
      <h3>这是第十一个demo:watch:监听ref、reactive:引用数据类型中的某个属性</h3>
      <p>我叫{{person.name}},今年{{person.age}}岁</p>
      <p>我会{{person.weapon.weapon2}},我有{{person.weapon.weapon1}}</p>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年龄</button>
      <button @click="changeWeapon1">修改第一个</button>
      <button @click="changeWeapon2">修改第二个</button>
      <button @click="changeAll">修改整个武器</button>
    </div>
  </template>
  
  <script setup>
  import { watch, reactive} from 'vue'
  
  let person = reactive({
      name:"孙悟空",
      age:20,
      weapon:{
          weapon1:"金箍棒",
          weapon2:"七十二变"
      }
  })
  function changeName() {
      person.name = '猪八戒'
  }
  function changeAge() {
      person.age = 40
  }
  function changeWeapon1() {
      person.weapon.weapon1 = '九齿钉耙'
  }
  function changeWeapon2() {
      person.weapon.weapon2 = '三十六变'
  }
  function changeAll() {
      person.weapon = {
          weapon1:"画画",
          weapon2:"哈哈哈"
      }
  }
  watch(()=>person.name,(newValue,oldValue) => {
      console.log('改变了',newValue,oldValue)
  })
  watch(()=>person.weapon,(newValue,oldValue) => {
      console.log('改变了1',newValue,oldValue)
  },{deep:true})
  
  </script>
  <style lang='scss' scoped>
  
  </style>